<template>
    <div>
        <div>
            <mt-header title="修改手机号" style="background: linear-gradient(#000000, #035838);">
                <mt-button icon="back" slot="left" @click="goBack()">返回</mt-button>
            </mt-header>
        </div>
        <div>
            <mt-field label="手机号" placeholder="请输入手机号" v-model="telephoneNumber"></mt-field>
        </div>
        <div>
            <tr>
                <td>
                    <mt-field label="验证码" placeholder="请输入验证码" v-model="identifyingCode"></mt-field>
                </td>
                <td>
                    <com-reciprocal :number='telephoneNumber' :oldnumber='oldtelephoneNumber' @setfalg="getIdentifyingCode"></com-reciprocal>
                </td>
            </tr>
        </div>
        <div class="promoters-button">
            <button class="mint-button mint-button--default mint-button--large is-plain" @click="updatetelephoneNumber()">
                <label class="mint-button-text">保存</label>
            </button>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
import Reciprocal from "../../common/vue/Reciprocal";
export default {
  components: {
    comReciprocal: Reciprocal
  },
  data() {
    return {
      telephoneNumber: this.$route.query.rq,
      oldtelephoneNumber: this.$route.query.rq,
      identifyingCode: "",
      flag: ""
    };
  },

  props: {},
  watch: {},
  mounted() {},
  created() {
    // 该方法用来更改tabbarshow的值 用来 展示、隐藏底部 tabbar (boolean为0 展示、boolean为1 隐藏)
    this.$store.dispatch("showTabbar", { boolean: "1" });
  },
  methods: {
    goBack() {
      history.go(-1);
    },

    updatetelephoneNumber() {
      let telephoneNumber = this.telephoneNumber;
      let identifyingCode = this.identifyingCode;
      let global_members_id = JSON.parse(
        localStorage.getItem("global_members_id")
      );
      axios({
        method: "post",
        url: "/api/updategrxx/grxxbj.htm",
        params: {
          id: global_members_id,
          telephone: telephoneNumber,
          yzm: identifyingCode
        }
      }).then(res => {
        res = res.data;
        if (res.zt === "true") {
          history.go(-1);
        } else {
          Indicator.close();
          let instance = Toast({
            message: "更新失败"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      });
    },
    // 获取验证码接口
    getIdentifyingCode(msg) {
      // msg 是子组件返回的值，当msg=1的时候可以执行接口
      if (msg === "1") {
        let telephoneNumber = this.telephoneNumber;
        axios({
          method: "post",
          url: "/api/phonecode/register.htm",
          params: {
            register_telephonenumber: telephoneNumber
          }
        }).then(res => {
          res = res.data;
          if (res.zt === "true") {
            Indicator.close();
            let instance = Toast({
              message: "验证码已发送"
            });
            setTimeout(() => {
              instance.close();
            }, 2000);
          } else {
            Indicator.close();
            let instance = Toast({
              message: "请输入新手机号"
            });
            setTimeout(() => {
              instance.close();
            }, 2000);
          }
        });
      }
    }
  }
};
</script>
<style scoped>
.promoters-button {
  height: 150px;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}
</style>